<template>
<!-- 外层容器 -->
  <el-card class="box-card">
    <!-- 头部 -->
    <div slot="header" class="clearfix">
      <!-- 表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="角色名称">
          <el-input v-model="formInline.user" placeholder="角色名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加角色按钮，添加点击事件 -->
    <el-button @click="addRole">添加角色</el-button>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述">
      </el-table-column>
      <el-table-column
        label="添加时间">
        <template slot-scope="scope">
          <!-- 使用过滤器过滤插槽数据 -->
          <span>{{scope.row.createdTime | time}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="180"
        center>
        <template slot-scope="scope">
          <!-- 分配菜单按钮 -->
          <el-button type="text" @click="assignmentMenu(scope.row.id)">分配菜单</el-button>
          <!-- 分配资源按钮 -->
          <el-button type="text">分配资源</el-button>
          <!-- 编辑按钮 -->
          <el-button
            type="text"
            @click="handleEdit(scope.row.id)">编辑</el-button>
            <!-- 删除按钮，添加事件 -->
          <el-button
            type="text"
            @click="roleDelete(scope.row.id)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 创建子组件实例，传递参数show，设置自定义事件 -->
    <Dialog :show="centerDialogVisible" :getId="getId" @reset="reset" @upDate="getRole"/>
  </el-card>
</template>

<script>
// 引入按条件查询角色、删除角色
import { getRolePages, deleteRole } from '@/services/role'
// 引入组件
import Dialog from './dialog'
export default {
  data () {
    return {
      formInline: {
      },
      // 表格数据
      tableData: [],
      // 对话框信号值，ture显示，false隐藏
      centerDialogVisible: false,
      // 信号值：当前需要编辑的角色id，默认为0
      getId: 0
    }
  },
  // 生命周期钩子函数
  created () {
    // 获取数据，使用控对象作为参数
    this.getRole({})
  },
  // 方法
  methods: {
    // 分配菜单按钮点击事件函数
    assignmentMenu (id) {
      // 带参数跳转
      this.$router.push({
        name: 'AssignmentMenu',
        params: {
          id
        }
      })
    },
    // 编辑按钮事件
    handleEdit (id) {
      // 修改信号值
      this.getId = id
      this.centerDialogVisible = true
    },
    // 组件自定义事件函数，重置信号值
    reset () {
      this.centerDialogVisible = false
      this.getId = 0
    },
    // 添加角色按钮事件
    addRole () {
      this.centerDialogVisible = true
    },
    // 获取角色
    async getRole (obj) {
      const { data } = await getRolePages(obj)
      if (data.code === '000000') {
        // 获取成功将数据交给表格进行渲染
        this.tableData = data.data.records
      }
    },
    // 删除角色
    async roleDelete (id) {
      const { data } = await deleteRole(id)
      if (data.code === '000000') {
        // 如果删除成功，弹出提示消息，并且重新渲染
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getRole()
      }
    }
  },
  // 过滤器
  filters: {
    // 时间格式过滤器
    time (data) {
      data = new Date()
      return `${data.getFullYear()}/${data.getMonth()}/${data.getDay()} ${data.getHours()}:${data.getMinutes()}:${data.getSeconds()}`
    }
  },
  // 注册组件
  components: {
    Dialog
  }
}
</script>
